<template>
  <div>
    <el-card class="main-card"
             shadow="never"
             v-loading="$store.state.loading">
      <el-form ref="form"
               :model="form"
               label-width="110px"
               :rules="rules"
               :disabled="type === 3">
        <el-row type="flex"
                justify="space-between">
          <el-col :span="11">
            <el-form-item label="农村名称："
                          prop="fkRuralId">
              <el-select v-model="form.fkRuralId"
                         placeholder="请选择农村名称"
                         filterable
                         clearable
                         style="width: 100%">
                <el-option v-for="item in deptList"
                           :key="item.id"
                           :label="item.deptName"
                           :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="微办事数"
                          prop="researchNumber">
              <el-input v-model.number="form.researchNumber"
                        placeholder="请输入办事研数"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="微民情数"
                          prop="securityNumber">
              <el-input v-model.number="form.securityNumber"
                        placeholder="请输入微民情数"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="微力量数"
                          prop="screeningNumber">
              <el-input v-model.number="form.screeningNumber"
                        placeholder="请输入微力量数"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="微走访数"
                          prop="visitNumber">
              <el-input v-model.number="form.visitNumber"
                        placeholder="请输入微走访数"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="群众满意度率"
                          prop="satisfactionRatio">
              <el-input v-model.number="form.satisfactionRatio"
                        placeholder="请输入群众满意度率"
                        type='number'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
          </el-col>
          <el-col :span="11">
            <el-form-item label="年份：">
              <el-date-picker v-model="form.statisticsYear"
                              type="year"
                              style="width: 100%"
                              value-format='yyyy'
                              placeholder="选择年份">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="微办事比率"
                          prop="researchRatio">
              <el-input v-model.number="form.researchRatio"
                        placeholder="请输入微办事比率"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="微民情比率"
                          prop="securityRatio">
              <el-input v-model.number="form.securityRatio"
                        placeholder="请输入微民情比率"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="微力量同比率"
                          prop="screeningRatio">
              <el-input v-model.number="form.screeningRatio"
                        placeholder="请输入微力量同比率"
                        type='number'></el-input>
            </el-form-item>
            <el-form-item label="微走访同比率"
                          prop="visitRatio">
              <el-input v-model.number="form.visitRatio"
                        placeholder="请输入微走访同比率"
                        type='number'></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import store from "../../../store"
export default {
  props: {
    type: {
      type: Number,
      default: 1
    },
    madelId: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    const checkNumber = (rule, value, callback) => {
      console.log(value)
      if (value === null || !(typeof value === 'number')) {
        console.log(value)
        callback(new Error('请输入数字值'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        fkRuralId: [{ required: true, message: '请输入农村名称', trigger: 'change' }],
        researchNumber: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        securityNumber: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        screeningNumber: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        visitNumber: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        satisfactionRatio: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        researchRatio: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        securityRatio: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        screeningRatio: [{ required: true, validator: checkNumber, trigger: 'blur' }],
        visitRatio: [{ required: true, validator: checkNumber, trigger: 'blur' }],
      },
      form: {
        fkRuralId: "",
        id: "",
        memo: "",
        researchNumber: null,
        researchRatio: null,
        satisfactionRatio: null,
        screeningNumber: null,
        screeningRatio: null,
        securityNumber: null,
        securityRatio: null,
        statisticsYear: null,
        updateUserName: "",
        version: 0,
        visitNumber: null,
        visitRatio: null
      },
      deptList: [],
      action: {
        def: '/ruralDefiledIndex/',
        getDept: '/accountDept/listSelectDeptNames'
      },
    }
  },
  created () {
    if (this.type === 1) {
      this.form.fkRuralId = (store.state.userInfo.deptList[0].id && store.state.userInfo.deptList[0].id !== '') ? store.state.userInfo.deptList[0].id : ''
      // this.form.fkRuralId = store.state.userInfo.deptList[0].id
    }
    this.getDeptInfo()
    if (this.type !== 1) {
      this.getPageList()
    }
  },
  methods: {
    getDeptInfo () {
      this.$Ajax(
        this.action.getDept,
        'get',
        {},
        (res) => {
          this.deptList = res.data
          // this.deptList = res.data
        }
      )
    },
    col () {
      this.$emit('colMalde')
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        this.$Ajax(
          this.action.def,
          this.type === 1 ? 'post' : 'put',
          this.form,
          (res) => {
            this.$message.success(res.message);
            this.$emit('getdata')
            this.col()
          }
        )
      })
    },
    getPageList () {
      this.$Ajax(
        this.action.def + this.madelId,
        "get",
        {
        },
        (res) => {
          console.log(res.data)
          Object.keys(this.form).forEach(key => {
            if (res.data[key] !== undefined) {
              this.form[key] = res.data[key]
              if (key === 'statisticsYear') {
                this.form[key] = res.data[key].toString()
              }
            }
          })
        }
      );
    },
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-input__inner {
  padding-right: 0px;
}
.footer-btn {
  text-align: right;
}
.divider {
  margin-bottom: 10px;
}
</style>